<template>

  <div class="row">
    <div class="col-md-10">
      <el-form ref="form" :model="form" label-width="70px" style="margin-top: 10px;">
        <div class="col-md-4">
          <el-form-item label="摄像头IP">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </div>
        <div class="col-md-2">
          <!--<el-form-item>-->
          <el-button type="primary" icon="el-icon-search" size="medium" @click="querydate()">搜索局域网设备</el-button>
          <!--</el-form-item>-->
        </div>
      </el-form>
    </div>
    <mu-divider/>
    <div class="col-md-12">
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="tableData3"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="video_name"
          label="摄像头IP地址">
        </el-table-column>
        <!--<el-table-column-->
        <!--prop="address"-->
        <!--label="地址"-->
        <!--show-overflow-tooltip>-->
        <!--</el-table-column>-->
      </el-table>
      <div style="margin-top: 20px;margin-left: 20px;">
        <!--<el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button>-->
        <el-button @click="toggleSelection()">提交</el-button>
      </div>
    </div>
  </div>

</template>

<script>
  import Hub from '../assets/eventBus.js';
  import {VideoInfoseach, addVideoInfo} from '../api/api';

  export default {
    data() {
      return {
        video_list_id: this.$route.query.video_list_id,
        form: {
          name: '',
        },
        tableData3: [],
        multipleSelection: [],
        loading: false
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      querydate() {
        var _this = this;
        var IP = this.form.name;
        this.loading=true;
        VideoInfoseach(IP)
          .then(responsedata => {
            this.loading=false;
            let {status, data} = responsedata;
            if (status !== 200) {
              this.$message({
                message: '请求失败',
                type: 'error'
              });
            } else {
              _this.tableData3 = data.values;
            }
          })
          .catch(function (response) {
            _this.logining = false;
            _this.$notify.error({
              title: '错误',
              message: '网络请求失败'
            });
            console.log(response);
          });
      },
      toggleSelection(rows) {
        var _this = this
//        if (rows) {
//          rows.forEach(row => {
//            this.$refs.multipleTable.toggleRowSelection(row);
//          });
//        } else {
//          this.multipleSelection;
//          this.$refs.multipleTable.clearSelection();
//        }
        var mydate = [];
        var selectDate = this.multipleSelection;
        if (selectDate != null && selectDate.length > 0) {
          for (var i in selectDate) {
            var select_item = selectDate[i];
            select_item.parent_id = this.video_list_id;
            mydate.push(select_item);
          }
          addVideoInfo(mydate)
            .then(responsedata => {
              //NProgress.done();
              let {status, data} = responsedata;
              if (status !== 200) {
                _this.$message({
                  message: '请求失败',
                  type: 'error'
                });
              } else {
                var descritpion = data.descritpion;
                if (data.status == '90000') {
                  Hub.$emit('change', 'hehe'); //Hub触发事件
                  _this.$message({
                    message: '提交成功',
                    type: 'success'
                  });
                } else {
                  _this.$message({
                    message: descritpion,
                    type: 'error'
                  });
                }

              }
            })
            .catch(function (response) {
              _this.$notify.error({
                title: '错误',
                message: '网络请求失败'
              });
              console.log(response);
            });
        } else {
          this.$message({
            message: '请选择摄像头',
            type: 'error'
          });
          return;
        }


      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>
<style>

</style>
